<template>
	<div class="student-details">

		<template v-if="roleBaseid(6)">
			
			<div class="classIndex_h">
				<router-link :to="{path: '/class/quality/details', query: {id: path}}">综合素质评价</router-link>
				<strong><i>></i>{{userName}}</strong>
			</div>

			<div class="quality-route">
				<router-link  class="fade-router" :to="{path: '/class/quality/student-portrait', query:query}">学生画像</router-link>
				<router-link   class="fade-router":to="{path: '/class/quality/student-details', query:query}">评价详情</router-link>
			</div>
		</template>

		<!-- 家长 -->
		<template v-else-if="roleBaseid(5)">
			<div class="classIndex_h">
				<span>综合素质评价</span>
			</div>

			<div class="quality-route">
				<router-link   class="fade-router" :to="{path: '/class/quality/index', query: {id: path}}">班级画像</router-link>
				<router-link   class="fade-router" :to="{path: '/class/quality/student-portrait', query: {id: path}}">孩子画像</router-link>
				<router-link   class="fade-router" :to="{path: '/class/quality/student-details', query: {id: path}}">评价详情</router-link>
			</div>

			<div class="quality-seleter">
				<span>学期：</span>
				<el-select v-model="semester" clearable  placeholder="请选择" @change="changeQuality">
				   <el-option  
				     v-for="(item, index) in SemesterList"
				     :key="index"
				     :label="item.name"
				     :value="item.id">
				   </el-option>
				 </el-select>
			</div>
		</template>

		<!-- 学生 -->
		<template v-else-if="roleBaseid(4)">

			<div class="classIndex_h">
				<span>综合素质评价</span>
				<!-- <router-link :to="{path: '/class/quality/details', query: {id: path}}">综合素质评价</router-link> -->
			</div>
			
			<div class="quality-route">
				<router-link  class="fade-router"  :to="{path: '/class/quality/index', query: {id: path}}">班级画像</router-link>
				<router-link  class="fade-router"  :to="{path: '/class/quality/student-portrait', query: {id: path}}">我的画像</router-link>
				<router-link   class="fade-router" :to="{path: '/class/quality/student-details', query: {id: path}}">评价详情</router-link>
				<router-link   class="fade-router" :to="{path: '/class/quality/self', query: {id: path}}">自我评价</router-link>
				<router-link   class="fade-router" :to="{path: '/class/quality/classmate', query: {id: path}}" v-if="evaluateName.includes($g.user_id+'')">评价同学</router-link>
			</div>

			<div class="quality-seleter">
				<span>学期：</span>
				<el-select v-model="semester" clearable  placeholder="请选择" @change="changeQuality">
				   <el-option  
				     v-for="(item, index) in SemesterList"
				     :key="index"
				     :label="item.name"
				     :value="item.id">
				   </el-option>
				 </el-select>
			</div>
		</template>

		<div class="evaluate-table" >
			<table>
				<thead>
				   <tr>
				     <th>一级指标</th>
				     <th>二级指标</th>
				     <th>指标定义</th>
				     <th>指标综合分</th>
				     <th>操作</th>
				   </tr>
				 </thead>
				 <tbody>
				 	<template  v-for="(item, index) of evaluateList"> 

				 		<template>
				 			<tr v-for="(child, key) of item.children">
				 			 	<td  width="100px" align="center" v-if="key == 0" :rowspan="item.children.length"><div class="ev-cell">{{item.title}}</div></td>
				 			 	<td  width="100px"  align="center"><div class="ev-cell">{{child.title}}</div></td>
				 			  	<td><div class="ev-cell">{{child.content}}</div></td>
				 			  	<td  width="60px"  align="center"><div class="ev-cell">
				 			  		
				 			  		<span  v-if='child.get_score '>{{child.get_score.toFixed(1)}}</span>
				 			  		<span v-else >--</span>
				 			  		<!-- <el-input v-else  type="number" :min="0" :max="child.score" v-model="child.number" disabled placeholder="请输入内容"></el-input> -->
				 			  	</div></td>
				 			  	<td  width="80px"><div class="ev-cell">
				 			  		<el-button type="text" @click='getGrading(child.id)'>评分详情</el-button>
				 			  	</div></td>
				 			</tr>
				 		</template>
				 		
				 	</template>
				 	
				 </tbody>
			</table>
		</div>

		<div class="evaluate-ls" v-if="state == 1">

			<div class="self-evaluate evaluate-commentList"  v-if="commentList.me.length != 0">
				<div class="quality-title"><i class="iq q-11"></i><span>自我评价</span></div>
				<div class="self-user" v-for="(item, index) of commentList.me">
					<div>
						<span>
							<img :src="BASE_URL + item.avatar_path">
						</span>
						<p>{{item.name}}</p>
					</div>
					<p v-html="item.comment"></p>
				</div>
			</div>
			
			<div class="self-evaluate evaluate-commentList"  v-if="commentList.teacher.length != 0">
				<div class="quality-title"><i class="iq q-11"></i><span>教师评语</span></div>
				<div class="self-user" v-for="(item, index) of commentList.teacher">
					<div>
						<span>
							<img :src="BASE_URL + item.avatar_path">
						</span>
						<p>{{item.name}}</p>
					</div>
					<p v-html="item.comment"></p>
				</div>
			</div>

			<div class="self-evaluate evaluate-commentList" v-if="commentList.student.length != 0">
				<div class="quality-title"><i class="iq q-11"></i><span>同学评语</span></div>
				<div class="self-user" v-for="(item, index) of commentList.student">
					<div>
						<span>
							<img :src="BASE_URL + item.avatar_path">
						</span>
						<p>{{item.name}}</p>
					</div>
					<p v-html="item.comment"></p>
				</div>
			</div>

		</div>

		<el-dialog
			title="指标评分情况"
			:visible.sync="gradingVisible"
			width="800px"
			custom-class="alBox"
			:close-on-click-modal="false">
				<div class="grading-wp">
					
					<div class="grading-box">
						<h3>教师评分（权重{{grading.weight1}}%）：{{grading.average1.toFixed(1)}}分</h3>
						<ul class="grading-list">
							<li v-for="(item, index) of grading.teacher">
								<span>{{item.name}}：</span>
								<span>{{item.score}}分</span>
							</li>
						</ul>
					</div>	

					<div class="grading-box">
						<h3>学生评分（权重{{grading.weight2}}%）：{{grading.average2.toFixed(1)}}分</h3>
						<ul class="grading-list">
							<li v-for="(item, index) of  grading.student">
								<span>{{item.name}}：</span>
								<span>{{item.score}}分</span>
							</li>
						</ul>
					</div>	

					<div class="grading-box">
						<h3>自己评分（权重{{grading.weight3}}%）：{{grading.average3.toFixed(1)}}分</h3>
						<ul class="grading-list">
							<li v-for="(item, index) of  grading.my">
								<span>{{item.name}}：</span>
								<span>{{item.score}}分</span>
							</li>
						</ul>
					</div>

					<div class="grading-sum">综合分：<em>{{grading.total.toFixed(1)}}</em> 分</div>
				</div>
		</el-dialog>
	</div>
</template>
<script>
	var labels = ['道德品质', '审美与表现', '运动与健康', '交流合作与实践创新', '学习能力', '公民素养'];
	import IEcharts from 'vue-echarts-v3/src/full.js';
	import 'echarts-wordcloud';
	export default {
		components: {IEcharts },
		data(){
			
			return{
				evaluateName: sessionStorage.getItem('evaluate') ? sessionStorage.getItem('evaluate') : [],
				query: this.$route.query,
				gradingVisible: false,
				placeholder1: false,
				placeholder2: false,
				activeName: '1',
				semester: this.$route.query.tid,
				path: this.$route.query.id,
				state: this.$route.query.state,
				userName: this.$route.query.name,
				evaluateList: [],
				commentList: {
					teacher: [],
					student: [],
					me: [],
				},
				SemesterList: [],
				grading: {
					teacher: [],
					student: [],
					my: [],
					weight1: 0,
					weight2: 0,
					weight3: 0,
					average1: 0,
					average2: 0,
					average3: 0,
					total: 0
				},
				identityVal: sessionStorage.getItem('parent_child_id') ? sessionStorage.getItem('parent_child_id') : this.$g.user_id, //缓存孩子id
			}
		},
		watch: {
			'$store.state.changData': {
				handler(val, newval){
					this.path = sessionStorage.getItem('classId')
					this.identityVal  =  sessionStorage.getItem('parent_child_id')  ? sessionStorage.getItem('parent_child_id') : this.$g.user_id; //缓存孩子id
					if (this.roleBaseid(4, 5)) {
						this.getSemester()
					}else{
						this.evaluatingIndicator()
						this.getComment()
					}
					
					
					
					
				},
				immediate: true
			}
		},
		methods: {
			changeQuality(val){
				this.semester = val
				this.evaluatingIndicator()
			},
			//请求学期数据
			getSemester(){
				let success = (res=>{

					this.SemesterList = res.data;
					this.semester = res.data.length > 0 ? res.data[0].id : ''
					for (var i = 0; i < this.SemesterList.length; i++) {
						if (this.SemesterList[i].semester == 1) {
							this.SemesterList[i].name = this.SemesterList[i].start_year +'-'+ this.SemesterList[i].end_year + '学年 第一学期'
						}else{
							this.SemesterList[i].name = this.SemesterList[i].start_year +'-'+ this.SemesterList[i].end_year + '学年 第二学期'
						}
					}
					this.state = 1
					this.evaluatingIndicator()
					// this.getComment()
				});

				let fail = (res=>{})

				let params = {
					now_term: 1
				};

				this.$ajax({
					url: 'api/quality/get_term',
					method: 'get',
					params: params,
					func: {success: success, fail: fail}
				})
			},
			/*评分详情*/
			getGrading(id){
				this.gradingVisible = true;

				let success = (res=>{

						let [a,b,c] = [0,0,0];
						this.grading.teacher = res.data.teacher.user,
						this.grading.student = res.data.student.user,
						this.grading.my = res.data.my.user,
						this.grading.weight1 = res.data.teacher.weight*100,
						this.grading.weight2 = res.data.student.weight*100,
						this.grading.weight3 = res.data.my.weight*100
					
				
					if (res.data.teacher.user.length != 0) {
						for (let i = 0; i < res.data.teacher.user.length; i++) {
							a += parseInt(res.data.teacher.user[i].score)
						}

						this.grading.average1 = a/res.data.teacher.user.length
					}
					
					if (res.data.student.user.length != 0) {
						for (let j = 0; j < res.data.student.user.length; j++) {
							b += parseInt(res.data.student.user[j].score)
						}
						this.grading.average2 = b/res.data.student.user.length
					}

					if (res.data.my.user.length != 0) {
						for (let k = 0; k < res.data.my.user.length;k++) {
							c += parseInt(res.data.my.user[k].score)
						}
						this.grading.average3 = c/res.data.my.user.length
					}


		
					this.grading.total = ((this.grading.average1+ this.grading.average2 + this.grading.average3))

					
					
				});



				let params = {
					term_id: this.semester,//学期id,
					class_id: this.path,
					user_id: this.$route.query.uid || this.$g.user_id,
					quality_index_id: id
				};

				this.$ajax({
					url: 'api/quality/get_detail_by_quality_index',
					method: 'get',
					params: params,
					func: {success: success}
				})
			},
			/*获取评语*/
			getComment(){
				let success = (res=>{
					this.commentList.teacher = res.data.teacher
					this.commentList.student = res.data.student
					this.commentList.me = res.data.me
				});

				let params = '';
				if (this.roleBaseid(5)) {
					params = {
						term_id: this.semester,//学期id,
						class_id: this.path,
						user_id: this.identityVal
					};
				}else{
					params = {
						term_id: this.semester,//学期id,
						class_id: this.path,
						user_id: this.$route.query.uid || this.$g.user_id,
						type: 1
					};
				}

				/*let params = {
					term_id: this.semester,//学期id,
					class_id: this.path,
					user_id: this.$route.query.uid || this.$g.user_id
				};*/

				this.$ajax({
					url: 'api/quality/get_other_comment',
					method: 'get',
					params: params,
					func: {success: success}
				})
			},
			/*获取素质评价指标*/
			evaluatingIndicator(){
				let success=  (res=>{
					this.evaluateList = res.data;

					if (this.state == 1) {
						this.getComment()
					}else{
						for (let i = 0; i < this.evaluateList.length; i++) {
							for (let j = 0; j < this.evaluateList[i].children.length; j++) {
								this.$set(this.evaluateList[i].children[j], 'number', '')
							}
						}
					}
					
					
					this.loading = false;
				})


				let params = '';
				if (this.roleBaseid(6)) {
					params = {
						term_id: this.semester,//学期id,
						class_id: this.path,
						user_id: this.$route.query.uid 
					};
				}else{
					params = {
						term_id: this.semester,//学期id,
						class_id: this.path,
						user_id: this.identityVal || this.$g.user_id,
						type: 1
					};
				}



				/*let params = {
					term_id: this.semester,//学期id,
					user_id: this.$route.query.uid || this.identityVal,
					class_id: this.path
				}*/

				this.$ajax({
					url: 'api/quality/score_quality',
					method: 'get',
					params: params,
					func: {success: success}
				})
			},

			onReady(instance) {
				// console.log(instance);
			},
		}
	}
</script>